<template>
    <div>
        <input :type="type" :placeholder="placeholder" v-model="content">
        
        <transition>
            <p class="tip" v-show="isShow">{{tipText}}</p>
        </transition>
    </div>
</template>

<script>
    export default {
        name:"Input-Login",
        props:['type','placeholder','tipText','rule'],
        data(){
            return {
                isShow:false,
                content:""
            }
        },
        methods: {
            handlerRulg(){
                const str = new RegExp(this.rule)
                if(str.test(this.content)){
                    this.$emit('getContent',this.content)
                    this.isShow = false
                }else{
                    this.isShow = true
                }
            }
        },
        watch:{
            content(){
                this.handlerRulg()
            }
        }
    }
</script>

<style scoped lang="less">
    div{
        width: 68vw;
        position: relative;
    }
     .v-enter,.v-leave-to{
        opacity: 0;
    }

    .v-enter-to,.v-leave{
        opacity: 1;
    }
    input{
        width: 66.7vw;
        height: 16vw;
        padding-left: 1.3vw;
        background: #F5F5F5;
        border: none;
        outline: none;
        border-radius: 8vw;
        text-align: center;
        margin-bottom: 8vw;
        transition: .4s;
        color: #ABABAB;
        font-size: 3.5vw;

        &:focus{
            font-size: 4.8vw;
        }

    }

    .tip{
        color: red;
        position: absolute;
        top: 18.7vw;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
        font-size: 3.2vw;
        transition: .4s;
    }



</style>